<template>
  <div class="box4" ref="map"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import chinaJson from "./china.json";
// import chinaJson from "./chinaCity.json";

let map = ref();
echarts.registerMap("china", chinaJson as any);
onMounted(() => {
  let mycharts = echarts.init(map.value);
  mycharts.setOption({
    geo: {
      map: "china",
      roam: true,
      left: 72,
      right: 72,
      bottom: 0,
      top: 66,
      label: {
        show: true,
        color: "#fff",
        fontSize: 14,
      },
      emphasis: {
        itemStyle: {
          areaColor: "red",
        },
        label: {
          show: true,
          color: "#fff",
          fontSize: 40,
        },
      },
      itemStyle: {
        opacity: 0.5,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "red", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "blue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },

    grad: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },

    series: {
      type: "lines",

      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [91.132212, 29.660361], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: "#fff",
            curveness: 0.3,
            width: 4,
          },
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [124.785462, 43.117185], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: "#fff",
            width: 4,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [121.509062, 25.044332], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: "#fff",
            curveness: 0.3,
            width: 4,
          },
        },
        {
          coords: [
            // 起点
            [121.509062, 25.044332], // 终点
            [116.405285, 39.904989],
          ],
          // 统一的样式设置
          lineStyle: { curveness: 0.3, color: "#fff", width: 4 },
        },
      ],
      effect: {
        show: true,
        roundTrip: true,
        symbol: "arrow",
        symbolSize: 20,
        color: "red",
      },
    },
  });
});
</script>

<style scoped></style>
